<template>
  <div class="m-cascader" :data-placeholder="placeholder" @click="handleOpen">{{label.join('')}}</div>
</template>

<script>
import Vue from 'vue'
export default {
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    options: {
      type: Array,
      default () {
        return [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }]
        }]
      }
    },
    disabled: {
      type: Boolean
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data () {
    let label = []
    if (this.value && this.value.length > 0) {
      let array = this.options
      this.value.forEach((item) => {
        array.forEach(a => {
          if (a.value === item) {
            label.push(a.label)
            if (a.children && a.children.length > 0) {
              array = a.children
            }
          }
        })
      })
    }
    return {
      open: false,
      label
    }
  },
  destroyed () {
    this.$$cascaderPicker && this.$$cascaderPicker.$destroy && this.$$cascaderPicker.$destroy()
    this.$$cascaderPicker = null
  },
  methods: {
    handleOpen () {
      this.open = true
      let self = this
      if (!self.$$cascaderPicker) {
        let node = document.createElement('div')
        document.body.appendChild(node)
        import('./CascaderPicker').then((res) => {
          let CascaderPicker = res.default
          self.$$cascaderPicker = new Vue({ // eslint-disable-line
            el: node,
            components: {
              CascaderPicker
            },
            render (h) {
              return (
                <CascaderPicker
                  style={{display: self.open ? 'block' : 'none'}}
                  value={self.value}
                  options={self.options}
                  label={self.label}
                  {...{on: {'update:label': this.handleLabel}}}
                  onClose={this.handleClose}
                  onChange={this.handleChange}/>
              )
            },
            destroyed () {
              this.$el && this.$el.parentNode && this.$el.parentNode.removeChild(this.$el)
            },
            methods: {
              handleClose () {
                self.open = false
              },
              handleChange (value) {
                if (JSON.stringify(value) !== JSON.stringify(self.value)) {
                  self.$emit('input', value).$emit('change', value)
                }
              },
              handleLabel (value) {
                self.label = value
              }
            }
          })
        })
      }
    }
  }
}

</script>

<style lang="scss">
  .m-cascader{
    height: 0.8rem;
    display: inline-block;
    line-height: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    @include placeholder;
  }
</style>
